<template>
    <view>
        <view class="zw"></view>
        <view class="my_page_title">
            <view v-show="isShowBack" @click="back" class="black_backbtn"></view>
            <view class="page_title_con">
                <text class="page_title"> {{titleName}}</text>
            </view>
        </view>
    </view>
</template>

<script setup>
import Taro from '@tarojs/taro';
import { ref, watch } from 'vue'
const props = defineProps(['titleName', 'isShowBack'])

let isShowBack = ref(true)
isShowBack.value = props.isShowBack

watch(()=>props.isShowBack, (val)=>{
    isShowBack.value = val
})

function back() {
    // console.log('fanhui,back')
    Taro.navigateBack({
        delta: 1 //
    })
}
</script>

<style>

    .zw {
        width: 100%;
        height:190px;
    }
    .my_page_title {
        width: 100%;
        height: 184px;
        background-color: #F7F3E8;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1000;
        font-size: 30px;
    }

    .page_title_con{
        width: 100%;
        height: 50px;
        text-align: center;
        position: absolute; 
        top: 110px;
    }

    .page_title {
        font-family: 'siyuan', sans-serif;
        font-size: 40px;
        color: #3B2122;
        width: 100%;
        line-height: 50px;
        text-align: center;
        display: inline-block;
    }

    .black_backbtn{
        width: 48px;
        height: 48px;
        font-size: 40px;
        color: #3B2122;
        position: absolute;
        margin-top: 114px;
        margin-left: 20px;
        display: inline-block;
        padding-left: 40px;
        z-index: 100;
    }
    .black_backbtn{
        background: url(../images/icon_arrow_left_black.png) no-repeat left center;
        background-size: 60%;
    }

    

</style>



